<template>
  <div class="login-container">
       <!--
        配置 Form 表单验证：
        1.必须给 el-form 组件绑定 model 为表单数据对象
        2.给需要验证的表单项 el-form-item 绑定 prop 属性
          注意：prop 属性需要制定表单对象中的数据名称
        3.通过 el-form 组件的 rules 属性配置验证规则
          具体的验证规则可以参考：https://github.com/yiminghe/async-validator
          如果内置的验证规则不满足，也可以自定义验证规则
        手动触发表单验证
        1.给 el-form 设置 ref 起个名字（随便起名，不要重复即可）
        2.通过 ref 获取 el-form 组件，调用组件的validate 进行验证
      -->
    <el-form
      ref="login-form"
      :model="user"
      class="login-form"
      :rules="formRules"
    >
      <div class="login-head"><h3>登录</h3></div>
      <el-form-item  prop="mobile">
          <!--  需要给input框前面添加图标:
           只需要在input中添加一个 suffix-icon="el-icon-user-solid"即可
           需要给input框后面添加图标:
           只需要在input中添加一个 show-password 即可
           -->
        <el-input
          prefix-icon="el-icon-mobile-phone"
          v-model="user.mobile"
          placeholder='请输入手机号'
        ></el-input>
      </el-form-item>
      <el-form-item prop="code">
        <el-input
          prefix-icon="el-icon-lock"
          v-model="user.code"
          placeholder='请输入验证码'
       ></el-input>
      </el-form-item>
      <el-form-item prop="agree">
        <el-checkbox v-model="user.agree">我已阅读并同意用户协议和隐私条款</el-checkbox>
      </el-form-item>
      <el-form-item>
        <el-button
        type="primary"
        @click="onLogin"
        class="login-btn"
        :loading="loadLogin">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { userLogin } from '@/api/user.js'
export default {
  name: 'Login',
  data () {
    return {
      user: {
        mobile: '13911111111', // 手机号
        code: '246810', // 验证码
        agree: false
      },
      checked: false, // 是否同意协议的勾选
      loadLogin: false,
      formRules: { // 表单验证规则
        mobile: [
          { required: true, message: '手机号不能为空', trigger: 'blur' },
          { pattern: /^1[3|5|7|8|9]\d{9}$/, message: '请输入正确的手机号格式', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '验证码不能为空', trigger: 'blur' },
          { pattern: /^\d{6}$/, message: '请输入正确的验证码格式', trigger: 'blur' }
        ],
        agree: [
          {
            // 自定义检验规则
            // 验证通过：callback()
            // 验证失败：callback( new Error('错误信息'))
            validator: (rule, value, callback) => {
              if (value) {
                callback()
              } else {
                callback(new Error('请同意用户协议'))
              }
            },
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    onLogin () {
      // 表单验证
      this.$refs['login-form'].validate(valid => {
        // 如果校验失败 停止提交
        if (!valid) {
        // err: Unnecessary return statement  不必要的返回语句（没有无用的返回)
        // return false 不能是 return
          return false
        }
        // 验证成功
        this.login()
      })
    },
    // 登录请求
    async login () {
    // 验证通过提交登录
      this.loadLogin = true
      try {
        const { data } = await userLogin(this.user)
        // console.log(data)
        this.$store.commit('setUser', data.data)
        this.$message({
          message: '登录成功',
          type: 'success'
        })

        // 关闭加载
        this.loadLogin = false
        // 登录成功 跳转首页
        this.$router.push('/')
      } catch (error) {
        this.$message.error('登录失败，手机号或验证码错误')
      }
    }
  }
}
</script>

<style lang="less" scoped>
.login-container{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url('./login_bg.jpg') no-repeat;
    background-size: cover;
    .login-form{
        background-color: #fff;
        padding:10px 50px 15px 50px;
        min-width: 300px;
        .login-head{
          color: #ccc;
          width: 100%;
          text-align: center;
        }
    }
    .login-btn{
        width: 100%;
    }
}
</style>
